<template>
  <transition name="toast-fade">
    <div v-if="ui.toastVisible" class="toast" :class="ui.toastType" role="status" aria-live="polite">
      {{ ui.toastMessage }}
    </div>
  </transition>
</template>

<script setup>
import { useUiStore } from '@/stores/ui'
const ui = useUiStore()
</script>

<style scoped>
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  font-weight: 600;
  color: #fff;
  z-index: 100;
  background: var(--color-primary);
}
.toast.success { background: var(--color-success, #22c55e); }
.toast.error { background: var(--color-danger, #ef4444); }
.toast.info { background: var(--color-primary, #6366f1); }

.toast-fade-enter-active,
.toast-fade-leave-active { transition: opacity .25s ease, transform .25s ease; }
.toast-fade-enter-from,
.toast-fade-leave-to { opacity: 0; transform: translateX(-50%) translateY(8px); }
</style>